@charset "utf-8";
@import "common/common";

header{
        border-bottom:r(1) solid #a7a7a7;
}
section{
    width: 100%;
    position: absolute;
    top: r(76);
    bottom: 0;
    overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
    aside{
        margin-top: r(28);
        .nav{
            width: r(300);
            //height: r(40);
            vertical-align: middle;
            margin: 0 auto;
            border-radius: r(6);
            overflow: hidden;
            li{
                float: left;
                width: r(98);
                height:r(36);
                border:r(2) solid #d0d0d0; 
                text-align: center;
                border-left:none;  
                &:nth-child(1){
                    border-left: r(2) solid #d0d0d0;
                    border-right: none;
                }
                a{
                    font-size: r(22);
                    color: #bcbcbc;
                    line-height: r(36);
                    vertical-align: top;
                }
                &.active,&:hover{
                    background: #a6a6a6;
                    a{color: white;}
                }
            }
        }
        .new{
            width: r(25);
            height: r(24);
            display: block;
            overflow: hidden;
            margin-right: r(28);
            margin-top: r(6);
            img{
                @include img();
                vertical-align: top;
            }
        }
    }
    article{
        .artShop{
            margin-top: r(30);
            border-bottom: 1px solid #e5e3de;
            .head{
                width: r(582);
                margin: 0 auto;
                .headInfoL,.headInfoR{
                    margin-top: r(61);
                    a{
                        display: block;
                        width: r(26);
                        height: r(26);
                        overflow: hidden;
                        img{
                            @include img();
                            vertical-align: top;
                        }
                    }
                }
                .headInfoL{margin-left: r(8);}
                .headInfoR{margin-right: r(8);}
                .headUser{
                    width: r(506);
                    height: r(160);
                    vertical-align: top;
                    margin: 0 auto;
                    .headImg{
                        width: r(60);
                        height: r(60);
                        margin: 0 auto;
                        border-radius:50% ;
                        overflow: hidden;
                        img{
                            @include img();
                        }
                    }
                    p{
                        font-size: r(18.67);
                        color: #343434;
                        text-align: center;
                        line-height: r(56);
                        span{
                            color: #ff0018;
                        }
                    }
                    ul{
                        width: r(210);
                        margin: 0 auto r(14);
                        li{
                            float: left;
                            width: r(55);
                            height: r(36);
                            border: 1px solid #e5e5e5;
                            font-size: r(18.67);
                            line-height: r(36);
                            text-align: center;
                            color: #9d9d9d;
                            margin-right: r(11);
                            border-radius: r(8);
                        }
                    }
                }
                .headText{
                    font-size: r(21.34);
                    color: #000;
                    opacity: 0.8;
                    letter-spacing: r(2);
                    line-height: r(40);
                    overflow : hidden;  
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    text-align: justify;
                }
            }
            .show{
                margin-top: r(16);
                li{
                    float: left;
                    width: r(212);
                    height: r(212);
                    overflow: hidden;
                    margin-right: r(2);
                    margin-bottom: r(2);
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                    img{
                        @include img();
                    }
                }
            }
            .show2{
                margin-top: r(16);
                li{
                    float: left;
                    width: r(319);
                    height: r(400);
                    margin-right: r(2);
                    margin-bottom: r(2);
                    overflow: hidden;
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    img{
                        @include img();
                    }
                }
            }
            .audio,.video{
                width: r(350);
                height: r(309);
                margin: r(10) auto 0;
                position: relative;
                .audio-bg{
                     @include img();
                    img{
                        @include img();
                    }
                }
                
            }
            #bigWrap{position: relative;}
            .audio-stop,.audio-begin{
                    width: r(61);
                    height: r(79);
                    @include auto();
                    img{
                        @include img();
                    }
                }
                .audio-begin{
                    display: none;
                }
            .progress{
                .song{
                    font-size: r(26.67);
                    color: #000;
                    opacity: 0.9;
                    text-align: center;
                    line-height: r(63);
                }
                div{
                    width: r(300);
                    height: r(4);
                    background: #7f7f7f;
                    margin: 0 auto;
                    position: relative;
                    margin-top: r(22);
                    .btn{
                        width: r(5);
                        height: r(28);
                        display: block;
                        background: #191919;
                        position: absolute;
                        left: r(49);
                        top: r(-12);
                    }
                    .playing{
                        width: r(49);
                        height: r(4);
                        background: #262626;
                        display: block;
                    }
                }
                .time{
                    font-size: r(21.34);
                    color:rgba(0,0,0,.5);
                    float: right;
                    position: relative;
                    right: r(105);
                    bottom: r(18);
                }
            }
            .artImg{
                width: r(380);
                height: r(500);
                margin: r(30) auto 0;
                img{
                    @include img();
                }
            }
            .artImg2{
                p{
                    font-size: r(18.67);
                    color: rgba(0,0,0,0.8);
                    line-height: r(50);
                    padding-left: r(44);
                    padding-right: r(44);
                    overflow : hidden;  
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
                div{
                    width: r(640);
                    height: r(500);
                    margin: r(18) auto 0;
                    img{
                        @include img();
                    }   
                }
            }
            .video{
                 width: r(640) !important;
                  height: r(360) !important;
                 video{
                    width: r(640) !important;
                    height: r(360) !important;
                }
                
            }
           .cir{
                    width: r(118);
                    height: r(118);
                    background: transparent;
                    border: 2px solid #FFFFFF;
                    border-radius: 50%;
                    @include auto();
                    right: r(20);
                }
            .infomation{
                height: r(65);
                .infoAddress{
                    p{
                        font-size: r(17.34);
                        color: #b8b8b8;
                        margin-left: r(28);
                        line-height: r(65);
                        span{
                            img{
                                width: r(16);
                                height: r(20);
                                opacity: 1;
                            }
                        }
                    }
                }
                ul{
                    li{
                        float: left;
                        font-size: r(17.34);
                        color: #b8b8b8;
                        height:r(65);
                        line-height:r(65) ; 
                            margin-right: r(32);
                        &:nth-child(1){
                            input{
                                width: r(25);
                                overflow: hidden;
                                height: r(6);
                                position: relative;
                                bottom: r(6);
                            }
                        }
                        &:nth-child(2){
                                input{
                                    width: r(24);
                                    height: r(24);
                                }
                        }
                        &:nth-child(3){
                                input{
                                    width: r(26);
                                    height: r(24);
                                }
                        }
                    }
                }
            }
        }
    }
}
.more_wrap{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.65);
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 999;
    display: none;
    .list{
        width: 100%;
        position: absolute;
        bottom: 0;
        transform: translateY(200%);
        transition: all 500ms;
        li{
            height: r(79);
            background: white;
            border-bottom: 1px solid #dcdcdc;
            font-size: r(26);
            color: rgba(0,0,0,.9);
            text-align: center;
            line-height: r(79);
            &:last-child{
                color: rgba(0,0,0,.5);
            }
            &:hover{
                background: #ccc;
                color: white;
            }
        }
    }
}
